<template>
  <div>
    <el-upload
      action=""
      :http-request="uploadFile"
      list-type="picture-card"
      :limit="size"
      :file-list="fileList"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove">
      <i class="el-icon-plus"></i>
    </el-upload>
  </div>
</template>

<script>
  import {uploadImage} from "@/api/apiFox";

  export default {
    props:['limit','imgSrc'],
    data(){
      return{
        fileList:[],
        image:"",
        size:1
      }
    },
    methods:{
      uploadFile(file){
        uploadImage(file.file).then(res=>{
          this.image = res.msg
          this.$emit('uploadImage',res.msg)
          this.fileList = [{
            name: res,
            url: res.msg,  // 图片URL
          }];
        })
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.isImageDialogVisible = true;
      },
    },
    mounted() {
      // console.log(this.imgSrc,'imgSrc')
      if(this.imgSrc){
        this.image = this.imgSrc
        this.fileList = [{
          name: this.imgSrc,
          url: this.imgSrc,  // 图片URL
        }];
        this.size = this.limit ? this.limit : 1
      }else{
        this.fileList = [];
      }

    },
    watch:{
      imgSrc(newValue,oldValue){
        if(this.imgSrc){
          this.image = this.imgSrc
          this.fileList = [{
            name: this.imgSrc,
            url: this.imgSrc,  // 图片URL
          }];
          this.size = this.limit ? this.limit : 1
        }else{
          this.fileList = [];
        }
      },
      limit(newValue,oldValue){
        this.size = newValue ? newValue : 1
      }
    }
  }
</script>

<style scoped lang="scss">

</style>
